<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="s" uri="/struts-tags" %>


<script type="text/javascript" language="javascript"
        src="<%=request.getContextPath()%>/js/main/forTab.js"></script>

<link type='text/css' href='<%=request.getContextPath()%>/css/general/tab.css' rel='stylesheet'
      media='screen'/>

<script type="text/javascript" language="javascript"
        src="<%=request.getContextPath()%>/js/main/forChanges.js"></script>
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {
    var ajaxLoading = false;
    var contentTopInt = parseFloat($("#content").css("margin-top").split("p")[0]);
    var footerTop = parseFloat($("#footer").css("margin-top").split("p")[0]);
             var minHeight=$(window).height()-312;
    var networkHeightInt = $("#networks").height() + footerTop + 23 + contentTopInt;

//    var deviceInfoHeightInt = $("#deviceInfo").height() == minHeight ? $("#deviceInfo").height() : ($("#deviceInfo").height() + footerTop + contentTopInt );
    var deviceInfoHeightInt = $("#deviceInfo").height();
    $("#content").css("height", deviceInfoHeightInt > networkHeightInt ? deviceInfoHeightInt : networkHeightInt);
    //  alert($(window).height()+" " +  $("#content").height())   ;
    //to show all disabled params
    $(".value").each(function(index) {
        var thisValue = $(this);
        if (thisValue.find("input[name='changed']").val() == 1) {
            thisValue.attr({disabled:true});
            thisValue.css("opacity", "0.5");
        }
    });


    //to check changes applied for each param with interval
    var interval = $("input[name='interval']").val();
    if (interval == 0) {
        interval = 10;
    }
    var countValue = $(".value").length;
    setInterval(function() {
        $(".value").each(function(index) {
            var thisValue = $(this);
            var pValue = thisValue.find(".pValue");
            var changed = thisValue.find("input[name='changed']");
            var input = thisValue.parent().find(".flag").find("input[name='property']");
            if (thisValue.find("input[name='changed']").val() == 1) {
                var paramName = $(this).find("input[name='paramName']").val();
                var serial = $("input[name='serial']").val();
                var timer;
                var isApplied = 0;
                $.ajax({
                    url: "checkChangesApplied.action",
                    data: {
                        serial: serial,
                        paramName: paramName
                    },
                    type:'POST',
                    dataType:'json' ,
                    success:function(data) {
                        if (data.applied == 1) {
                            pValue.text(data.newValue);
                            changed.val(2);
                            thisValue.attr({disabled:false});
                            thisValue.css("opacity", "1");
                            var img = "<img src='images/content/flag.png'   width='12' height='13'/>";
                            thisValue.parent().find(".flag").html(img + "<input type='hidden' name='property' value='" + input.val() + "' />");
                        } else if (data.applied == 2) {
                            changed.val(3);
                            thisValue.attr({disabled:false});
                            thisValue.css("opacity", "1");
                            var img = "<img src='images/content/error.png'   width='12' height='13'/>";
                            thisValue.parent().find(".flag").html(img);
                            thisValue.parent().find(".flag").find("img").append(input);
                        }
                    }
                });
            }
        });

    }, 10000);

    $(".thStatus").css("width", "50px");
    $(".flag").find("img").css("width", "16px");
    $(".flag").find("img").css("height", "16px");
    $(".paramName").css("max-width", "150px");
    $(".value").css("max-width", "170px");

    //for showing not writable params
    $(".gradeX").each(function() {
        if ($(this).find("input[name='writable']").val() == 'false') {
            $(this).find(".paramName").css("color", "teal");
        }
    });

    //to hide history on hover out
    $(".changesData").hover(function() {

    }, function() {
        $(".changesData").html("");
        $(".changesData").css("margin-top", 0);
        $(".changesData").css("margin-left", 0);
        $(".changesData").hide();

    });

    $(".value").find("input[name='change']").hide();
    $(".value").find("div").show();
    $(".value").find(".sendNew").hide();
    $(".changesData").hide();
    $(".flag").css("margin-right", "20px");
    var k = 0;
    jQuery.each(jQuery.browser, function(i, val) {
        if (i == "mozilla") {
            k = 1;
        } else if (i != "version") {
            k = 0;
        }
    });
    if (k == 0) {
        $(".tabs").find("a").css("padding-top", "8px");
        $(".tabs").find("a").css("padding-bottom", "8px");
    }

    var userType = $("input[name='userType']").val();
    $(".flag").find("img").live('mouseenter mouseout',
            function (event) {
                if (!ajaxLoading) {
                    ajaxLoading = true;
                    if (event.type == 'mouseenter') {
                        var marginTop = $(this).offset().top - $("#headerC").height() - parseFloat($("#content").css("margin-top").split("p")[0]) - parseFloat($("#deviceInfo").css("padding-top").split("p")[0]) - parseFloat($(".tabbed_area").css("padding-top").split("p")[0]) - parseFloat($(".tabs").css("margin-top").split("p")[0]) - parseFloat($(".tabs").css("margin-bottom").split("p")[0]);
                        if (userType == 1) {
                            marginTop = marginTop - $("#menu").height() - 65;
                        } else {
                            marginTop = marginTop - $("#usLogout").height() - 15;
                        }
                        var param = $(this).parent().find("input[name='property']").val();
                        var serial = $("input[name='serial']").val();

                        $.ajax({
                            url: "getChangedValues.action",
                            data:{
                                paramId: param,
                                serial: serial
                            },
                            type:"post",
                            cache:false,
                            success:function(data) {
                                var examp = $(".info").width();
                                $(".changesData").css("margin-left", examp - 180);
                                $(".changesData").css("margin-top", marginTop);
                                $(".changesData").css("border-style", "double");
                                $(".changesData").css("background-color", "#ffdddd");
                                $(".changesData").css("font-size", 13);
                                $(".changesData").html(data);

                                $(".changesData").css("display", "block");
                            }
                        });

                    }
                    if (event.type == 'mouseout') {
                        var mouseY = event.pageY;
                        var flagTop = $(this).offset().top;
                        var mouseX = event.pageX;
                        var flagLeft = $(this).offset().left;
                        var flagRight = flagLeft + $(this).width();
                        if (mouseY < flagTop || mouseX < flagLeft || mouseX > flagRight) {
                            $(".changesData").html("");
                            $(".changesData").css("display", "none");
                        }
                    }
                    ajaxLoading = false;
                }
            });

    $(".value").live("dblclick", function() {

        if ($(this).find("input[name='changed']").val() != 1) {
            var userType = $("input[name='userType']").val();
            var writable = $(this).find("input[name='writable']").val();
            if (writable == "true") {
                var thisValue = $("input[name='value']").val();
                $(this).find("div").hide();
                $(this).find("input[name='change']").show();
                $(this).find(".sendNew").show();
            } else {
                alert("Sorry,but you can't change this param!");
            }
        }
        return false;
    });
    var step = 0;

    $(".sendNew").unbind("click").click(function() {
        if (!ajaxLoading) {
            ajaxLoading = true;

            var pValue = $(this).parent();
            pValue.attr({disabled:true});
            pValue.css("opacity", "0.5");
            var parentPValue = pValue.parent().find(".flag");
            var newValue = $(this).parent().find("input[name='change']").val();
            var paramName = $(this).parent().find("input[name='paramName']").val();
            var paramType = $(this).parent().find("input[name='paramType']").val();
            var interval = $(this).parent().find("input[name='interval']").val();
            var input = parentPValue.find("input[name='property']");
            var paramId = input.val();

            var serial = $("input[name='serial']").val();
            $.ajax({
                url: "saveChangesInFile.action",
                data:{
                    newValue: newValue,
                    paramId: paramId,
                    paramName: paramName,
                    paramType: paramType,
                    serial: serial
                },
                type:"post",
                success:function(result) {

                    if (result == "success") {
                        pValue.find(".pValue").show();
                        pValue.find("input[name='change']").hide();
                        pValue.find(".sendNew").hide();
                        var img = "<img src='images/content/wait.png'   width='10' height='16'/>";
                        parentPValue.html(img + "<input type='hidden' name='property' value='" + input.val() + "' />");
                        pValue.find("input[name='changed']").val(1);
                        $("input[name='changeValue']").val(1);
                    } else if (result == "result_for_boolean") {
                        alert("You can't set " + newValue + " to boolean variable! Try to set 0 or 1 !");
                        pValue.attr({disabled:false});
                        pValue.css("opacity", "1");
                        pValue.find(".pValue").show();
                        pValue.find("input[name='change']").hide();
                        pValue.find(".sendNew").hide();
                    } else if (result == "result_for_integer") {
                        alert("You can't set " + newValue + " to integer variable! Try to set only numbers!");
                        pValue.attr({disabled:false});
                        pValue.css("opacity", "1");
                        pValue.find(".pValue").show();
                        pValue.find("input[name='change']").hide();
                        pValue.find(".sendNew").hide();
                    }
                    else if (result == "error") {
                        alert("Sorry , error ocurred. Please try again !");
                        pValue.attr({disabled:false});
                        pValue.css("opacity", "1");
                        pValue.find(".pValue").show();
                        pValue.find("input[name='change']").hide();
                        pValue.find(".sendNew").hide();
                    }
                }
            });
            ajaxLoading = false;

        }
    });

    $(".setDef").unbind("click").click(function() {
        if (!ajaxLoading) {
            ajaxLoading = true;
            var pValue = $(this).parent();
            if (pValue.find("input[name='changed']").val() != 1) {
                pValue.attr({disabled:true});
                pValue.css("opacity", "0.5");
                var parentPValue = pValue.parent().find(".flag");
                var paramName = $(this).parent().find("input[name='paramName']").val();
                var serial = $("input[name='serial']").val();
                var input = parentPValue.find("input[name='property']");
                var paramId = input.val();
                $.ajax({
                    url: "setDefValueForParam.action",
                    data:{
                        paramName: paramName,
                        paramId: paramId,
                        serial: serial
                    },
                    type:"post",
                    success:function(result) {
                          if (result == "success") {

                        pValue.find(".pValue").show();
                        pValue.find("input[name='change']").hide();
                        pValue.find(".sendNew").hide();
                        var img = "<img src='images/content/wait.png'   width='10' height='16'/>";
                        parentPValue.html(img + "<input type='hidden' name='property' value='" + input.val() + "' />");
                        pValue.find("input[name='changed']").val(1);
                        return false;
                    } else if (result = "error") {
                        alert("Sorry error occurred.Please try again!");
                               return false;
                    }


                    }
                });
            } else {
                alert("You can't change value until the previous request hasn't been answered!");

            }
            ajaxLoading = false;
        }
    });

    $(".tabs").find("li").find("a").css("fontWeight", "normal");

    $("#setDefaults").click(function() {
        if (!ajaxLoading) {
            ajaxLoading = true;
            var checkParamsType = $("input[name='lanOrWan']").val();

            var paramsArray = "";
            $("." + checkParamsType).each(function() {

                if ($(this).find("input[name='writable']").val() == "true") {
                    if ($(this).find("input[name='changed']").val() != 1) {
                        if (paramsArray == "") {
                            paramsArray = $(this).find(".flag").find("input[name='property']").val();
                        } else {
                            paramsArray = paramsArray + "," + $(this).find(".flag").find("input[name='property']").val();
                        }
                    }
                }
            });
            var serial = $("input[name='serial']").val();
            $.ajax({
                url: "setDefValuesForManyParam.action",
                data:{
                    paramIds: paramsArray,
                    serial: serial
                },
                type:"post",
                success:function(result) {
                    if (result == "success") {
                        $("." + checkParamsType).each(function() {
                            if ($(this).find("input[name='writable']").val() == "true") {
                                $(this).find(".pValue").show();
                                $(this).find("input[name='change']").hide();
                                $(this).find(".sendNew").hide();
                                var img = "<img src='images/content/wait.png'   width='10' height='16'/>";
                                var input = $(this).find(".flag").find("input[name='property']");
                                $(this).find(".flag").html(img + "<input type='hidden' name='property' value='" + input.val() + "' />");
                                $(this).find(".value").find("input[name='changed']").val(1);
                                $(this).find(".value").attr({disabled:true});
                                $(this).find(".value").css("opacity", "0.5");
                            }
                        });
                    } else if (result = "error") {
                        alert("Sorry error occurred.Please try again!");
                    }
                }
            });

            ajaxLoading = false;
        }
    });
    $("#reboot").click(function() {
        if (!ajaxLoading) {
            ajaxLoading = true;
            var serial = $("input[name='serial']").val();

            $.ajax({
                url: "reboot.action",
                data:{
                    serial: serial
                },
                type:"post",
                success:function(result) {

                    if (result == "success") {
                    } else if (result = "error") {
                        alert("Sorry error occurred.Please try again!");
                    }

                }
            });
            ajaxLoading = false;
        }
    })
});
</script>
<style type="text/css">


    ul.tabs li a {
        background-color: #a9a9a9;
        color: #008b8b;
        padding: 7px 14px 7px 14px;
        text-decoration: none;
        font-size: 13px;
        font-family: Arial;
        text-transform: uppercase;
        border: 1px solid #a9a9a9;
        width: 100px;
    }

    .changesData {
        background: #add8e6 !important;
        position: absolute;
        width: 260px !important;
        float: left;
        z-index: 100;
        opacity: 1;
        clear: both;
        max-height: 585px;
        overflow-y: hidden;
        overflow-x: hidden;
    }

    .flag {
        margin-left: 50% !important;
        width: 16px !important;
        height: 16px !important;
    }

    .wait {
        width: 10px !important;
        height: 16px !important;
    }

    .error {
        width: 14px !important;
        height: 14px !important;

    }

    .okk {
        width: 12px !important;
        height: 13px !important;
    }

    .flag img {

        margin-top: 0% !important;
        float: left !important;
    }

    #example {
        z-index: -1;
    }

    #formForDeviceInfo {
        z-index: -8;
        top: 0 !important;

    }

    .sendNew {
        background-image: url('images/ok/ok.png');
        width: 16px;
        height: 16px;
        border: none;
    }

    td .status {
        width: 50px;
    }

    .thparamName {
        width: 250px !important;
    }

    .thvalue {
        width: 250px !important;
    }

    .thStatus {
        width: 150px !important;
    }

    thead tr {
        background: #ddd;
    }

    th {
        font-style: italic;
        font-weight: normal;
    }

    #deviceInfo {
        padding-right: 0px !important;
        padding-left: 10px !important;
        max-height: 800px !important;
    }

    #content {
        max-height: 1200px !important;
    }

    .tabbed_area {
        padding: 8px 0px !important;
    }

    .info {
        margin-left: 0px;
        margin-top: 30px;
        border: #212121 dashed 0px;
        width: 630px;
    }

    .gradeX {
        background: #add8e6;
    }

    .setDef {
        color: #000000;
        float: right;
    }

    td {
        border: #87ceeb solid 2px;
    }


</style>


<div id="forDeviceInfo">

    <div id="tabbed_box_1" class="tabbed_box">

        <div class="tabbed_area">

            <ul class="tabs">
                <li><a href="#" title="content_1" class="tab active">WAN</a></li>
                <li><a href="#" title="content_2" class="tab">LAN</a></li>

            </ul>

            <div id="content_1" class="content">

                <s:if test="%{dataRows!=null}">
                    <div class="changesData"></div>
                    <form method="post" action="saveDeviceInfo" id="formForDeviceInfo">

                        <span class="title"><s:text name="label.serialNumber"/>:<s:property value="serial"/></span>
                        <table class="info">
                            <thead>
                            <tr>
                                <th class="thparamName"><s:text name="label.propertyName"/></th>
                                <th class="thvalue"><s:text name="label.propertyValue"/></th>
                                <th class="thStatus"><s:text name="label.changed"/></th>
                            </tr>
                            </thead>

                            <tbody>
                            <s:iterator value="dataRows" var="dataRow" status="s_dataRow">
                                <s:if test="%{#dataRow.lanParam==0}">
                                    <tr class="gradeX WAN">
                                        <td class="paramName">
                                            <s:property value="#dataRow.paramNameForView"/>
                                        </td>
                                        <td class="value">
                                            <div class="pValue">
                                                <s:if test="%{!isValueEmpty(#dataRow.paramValue)}">
                                                    <s:property value="#dataRow.paramValue"/>
                                                </s:if>
                                                <s:else>
                                                    none
                                                </s:else>
                                            </div>
                                            <input type="text" name="change" style="width: 150px;"
                                                   value=" <s:property value="#dataRow.paramValue"/>"/>

                                            <input type="button" class="sendNew"/>
                                            <input type="hidden" name="paramName"
                                                   value="<s:property value="#dataRow.paramNameForView"/>"/>
                                            <input type="hidden" name="writable"
                                                   value="<s:property value="#dataRow.writable" />"/>
                                            <input type="hidden" name="paramType"
                                                   value="<s:property value="#dataRow.paramType"/>"/>
                                            <input type="hidden" name="changed"
                                                   value="<s:property value="#dataRow.paramChanged"/>"/>
                                            <s:if test="%{#dataRow.writable}">
                                                <a href="#" class="setDef">def</a>
                                            </s:if>
                                        </td>
                                        <td class="status">
                                            <div class="flag">
                                                <s:if test="%{#dataRow.paramChanged==1}">
                                                    <img src="<%=request.getContextPath()%>/images/content/wait.png"
                                                         class="wait" width="10" height="16"/>
                                                </s:if>
                                                <s:elseif test="%{#dataRow.paramChanged==2}">
                                                    <img src="<%=request.getContextPath()%>/images/content/flag.png"
                                                         class="okk" width="12" height="13"/>
                                                </s:elseif>
                                                <s:elseif test="%{#dataRow.paramChanged==3}">
                                                    <img src="<%=request.getContextPath()%>/images/content/error.png"
                                                         class="error" width="14" height="14"/>
                                                </s:elseif>
                                                <s:elseif test="%{#dataRow.paramChanged==4}">
                                                    <img src="<%=request.getContextPath()%>/images/content/question.png"
                                                         width="16" height="16"/>
                                                </s:elseif>
                                                <input type="hidden" name="property"
                                                       value="<s:property value="#dataRow.id"  />"/>

                                            </div>
                                        </td>
                                    </tr>
                                </s:if>
                            </s:iterator>
                            </tbody>
                        </table>
                        <input type="hidden" name="serial" value="<s:property value="serial"  />"/>
                        <input type="hidden" name="userType"
                               value="<s:property value="#session.user.userType.value"  />"/>
                        <input type="hidden" name="interval" value="<s:property value="interval"/>"/>

                    </form>


                </s:if>
                <s:else>
                    <s:text name="msg.notChanged.property"/>
                </s:else>
            </div>
            <div id="content_2" class="content">
                <s:if test="%{!isListEmpty(dataRows)}">
                    <div class="changesData"></div>
                    <form method="post" action="saveDeviceInfo" id="formForDeviceInfo">
                        <span class="title"><s:text name="label.serialNumber"/>:<s:property value="serial"/></span>
                        <table class="info">
                            <thead>
                            <tr>
                                <th class="thparamName"><s:text name="label.propertyName"/></th>
                                <th class="thvalue"><s:text name="label.propertyValue"/></th>
                                <th class="thStatus"><s:text name="label.changed"/></th>
                            </tr>
                            </thead>

                            <tbody>
                            <s:set name="hasLan" value="0"/>
                            <s:iterator value="dataRows" var="dataRow" status="s_dataRow">
                                <s:if test="%{#dataRow.lanParam==1}">
                                    <s:set name="hasLan" value="#hasLan+1"/>
                                    <tr class="gradeX LAN">
                                        <td class="paramName">
                                            <s:property value="#dataRow.paramNameForView"/>
                                        </td>
                                        <td class="value">
                                            <div class="pValue">
                                                <s:if test="%{!isValueEmpty(#dataRow.paramValue)}">
                                                    <s:property value="#dataRow.paramValue"/>
                                                </s:if>
                                                <s:else>
                                                    none
                                                </s:else>
                                            </div>
                                            <input type="text" name="change" style="width: 150px;"
                                                   value=" <s:property value="#dataRow.paramValue"/>"/>

                                            <input type="button" class="sendNew"/>
                                            <input type="hidden" name="paramName"
                                                   value="<s:property value="#dataRow.paramNameForView"/>"/>
                                            <input type="hidden" name="writable"
                                                   value="<s:property value="#dataRow.writable" />"/>
                                            <input type="hidden" name="paramType"
                                                   value="<s:property value="#dataRow.paramType"/>"/>
                                            <input type="hidden" name="changed"
                                                   value="<s:property value="#dataRow.paramChanged"/>"/>
                                            <s:if test="%{#dataRow.writable}">
                                                <a href="#" class="setDef">def</a>
                                            </s:if>
                                        </td>
                                        <td class="status">
                                            <div class="flag">
                                                <s:if test="%{#dataRow.paramChanged==1}">
                                                    <img src="<%=request.getContextPath()%>/images/content/wait.png"
                                                         class="wait" width="10" height="16"/>

                                                </s:if>
                                                <s:elseif test="%{#dataRow.paramChanged==2}">
                                                    <img src="<%=request.getContextPath()%>/images/content/flag.png"
                                                         class="okk" width="12" height="13"/>
                                                    <%--<input type="hidden" name="property" value="<s:property value="#dataRow.paramNameForView"  />"/>--%>

                                                </s:elseif>
                                                <s:elseif test="%{#dataRow.paramChanged==3}">
                                                    <img src="<%=request.getContextPath()%>/images/content/error.png"
                                                         class="error" width="14" height="14"/>
                                                    <%--<input type="hidden" name="property" value="<s:property value="#dataRow.paramNameForView"  />"/>--%>

                                                </s:elseif>
                                                <s:elseif test="%{#dataRow.paramChanged==4}">
                                                    <img src="<%=request.getContextPath()%>/images/content/question.png"
                                                         width="16" height="16"/>
                                                    <%--<input type="hidden" name="property" value="<s:property value="#dataRow.paramNameForView"  />"/>--%>

                                                </s:elseif>
                                                <input type="hidden" name="property"
                                                       value="<s:property value="#dataRow.id"  />"/>

                                            </div>
                                        </td>
                                    </tr>
                                </s:if>
                            </s:iterator>
                            <s:if test="%{#hasLan==0}">
                                <div> There is no property for LAN</div>
                            </s:if>
                            </tbody>
                        </table>
                        <input type="hidden" name="serial" value="<s:property value="serial"  />"/>
                        <input type="hidden" name="userType"
                               value="<s:property value="#session.user.userType.value"  />"/>
                        <input type="hidden" name="interval" value="<s:property value="interval"/>"/>
                    </form>
                </s:if>
                <s:else>
                    <s:text name="msg.notChanged.property"/>
                </s:else>

            </div>
        </div>

    </div>
</div>
<input type="hidden" name="changeValue" value="0"/>
<input type="button" value="Reboot" id="reboot"/>
<input type="submit" value="Set Defaults" id="setDefaults"/>
<input type="hidden" name="lanOrWan" value="WAN"/>


